// https://tailwindcss.com/docs/functions-and-directives
// @use "tailwindcss/base";
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';
/* You can add global styles to this file, and also import other style files */
@use 'theme-config/blue-colors';
@use 'theme-config/green-colors';
@use 'theme-config/pink-colors';
@use 'theme-config/dark-colors';
@use 'main';
html {
  font-size: 16px;
  scroll-behavior: smooth;
  font-family:
    'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
    Arial, sans-serif;
  width: 100%;
  overflow-x: hidden;
}

@layer components {
  [class*='translate-'],
  [class*='rotate-'],
  [class*='scale-'],
  [class*='skew-'] {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
  }
}

@layer utilities {
  *[class*='from-'],
  *[class*='to-'] {
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
  }
}

body {
  width: 100vw;
  max-width: 100%;
  display: block;
  font-size: 1rem;
  line-height: 1.618;
  overflow-x: hidden;
  overflow-y: auto;
  .mat-mdc-raised-button:not(:disabled) {
    color: var(--mat-sys-on-primary);
    background-color: var(--mat-sys-primary);
    &.mat-warn {
      color: var(--mat-sys-on-error);
      background-color: var(--mat-sys-error);
    }
  }
  .mat-mdc-unelevated-button:not(:disabled) {
    &.mat-warn {
      color: var(--mat-sys-on-error);
      background-color: var(--mat-sys-error);
    }
  }
  .mat-warn:not(:disabled) {
    color: var(--mat-sys-error);
  }
  .mat-mdc-outlined-button:not(:disabled) {
    &.mat-warn {
      border-color: var(--mat-sys-error);
    }
  }
  .mat-mdc-outlined-button:not(.mat-button-disabled) {
    &.mat-primary {
      border-color: var(--mat-sys-primary);
      color: var(--mat-sys-primary);
    }
  }
}

*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

// fix sidebar position sticky
.mat-drawer-content,
.mat-drawer-container {
  overflow: visible !important;
}

.mat-drawer-content {
  > app-dynamic-component {
    position: relative;
  }
}

.mat-icon {
  display: swap;
}

pre {
  font-size: 0.9em;
  padding: calc(0.8em / 0.9);
  word-break: initial;
  word-wrap: initial;
  white-space: pre;
  overflow: auto;
  border-radius: 4px;

  .hljs {
    background-color: transparent;
  }
}
:root {
  --mat-button-text-container-height: 36px;
  --mat-button-filled-container-height: 36px;
  --mat-button-protected-container-height: 36px;
  --mat-button-outlined-container-height: 36px;
  --mat-form-field-container-height: 56px;
  --mat-button-text-label-text-size: 14px;
  --mat-sys-label-large-size: 14px;
  --mat-sidenav-container-width: auto;
  --mat-sys-body-small-size: 12px;
  --mat-sys-body-medium-size: 14px;
  --mat-sidenav-container-elevation-shadow:
    0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
    0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  .mdc-fab {
    --mat-sys-corner-large: 50%;
    --mat-sys-corner-medium: 50%;
  }
}
